<template>
  <div>
    <brand brand1="订单管理" brand2="订单列表"></brand>
    <el-card>
      <el-row>
        <el-input placeholder="请输入内容" v-model="queryinfo.query" clearable @clear="getOrderList()">
          <el-button slot="append" icon="el-icon-search" @click="getOrderList()"></el-button>
        </el-input>
      </el-row>
      <el-row>
        <el-table :data="listData" style="width: 100%" border>
          <el-table-column type="index"></el-table-column>
          <el-table-column prop="order_number" label="订单编号" width="220"></el-table-column>
          <el-table-column prop="order_price" label="订单价格（元）" width="180"></el-table-column>
          <el-table-column prop="order_pay" label="是否付款">
            <template  slot-scope="scope">
              <div>
                <el-button type="warning" plain v-show="scope.row.order_pay == 0">未付款</el-button>
                <el-button type="success" plain v-show="scope.row.order_pay == 1">已付款</el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="is_send" label="是否发货"></el-table-column>
          <el-table-column   label="下单时间">
            <template  slot-scope="scope1">
              <div>
                {{ scope1.row.create_time | dateFrom}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div>
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  @click="editOrder(scope.row.order_id)"
                ></el-button>
                <el-button
                  type="success"
                  icon="el-icon-map-location"
                  title="查看物流"
                  @click="orderSend(scope.row.order_number)"
                ></el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <!-- //分页器 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryinfo.pagenum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 请求订单列表数据
      queryinfo: {
        query: '',
        pagenum: 1,
        pagesize: 5
      },
      listData: [], // 列表数据
      total: 0 // 总数
    }
  },
  methods: {
    // 搜索
    doSearch() {
      console.log(this.queryinfo)
      this.getOrderList()
    },
    // 请求订单列表
    async getOrderList() {
      let { data: res } = await this.$Http.orderList(this.queryinfo)
      console.log(res)
      if (res.meta.status != 200) return this.$message.error(res.meta.msg)
      this.listData = res.data.goods
      this.total = res.data.total
    },
    // 行内按钮编辑/物流
    editOrder(val) {
      console.log(val)
    },
    orderSend(val) {
      console.log(val)
    },
    // 分页器
    handleSizeChange(size) {
      this.queryinfo.pagesize = size
      this.getOrderList()
    },
    handleCurrentChange(curr) {
      this.queryinfo.pagenum = curr
      this.getOrderList()
    }
  },
  computed: {
    // 直接当做普通属性调用不加括号
    // 任何data中数据变化立即重新计算
    // 计算属性会缓存
  },
  created() {
    this.getOrderList()
  }
}
</script>
<style lang='less' scoped>
.el-input {
  width: 50%;
}
</style>
